<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Javascript之匿名函数与箭头函数 |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Javascript之匿名函数与箭头函数</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-05 11:00:11</span>
        <span class="mobile">2023-06-05 11:00</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-06-03 17:22:51</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Javascript/">Javascript</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0/">匿名函数</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>2k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>9 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://cn.bing.com/th?id=OHR.BiodiverseCostaRica_ZH-CN5524154131_1920x1200.jpg&rf=LaDigue_1920x1200.jpg" alt="bing.com-阿雷纳尔火山，蒙泰韦尔德，哥斯达黎加" title="bing.com-阿雷纳尔火山，蒙泰韦尔德，哥斯达黎加"></p>
<p>Javascript中箭头函数匿名函数的含义、使用方法及区别。</p>
<span id="more"></span>

<h1 id="1、匿名函数"><a href="#1、匿名函数" class="headerlink" title="1、匿名函数"></a>1、匿名函数</h1><p>顾名思义，匿名函数就是没有赋予名字的函数，可以将此函数当作<strong>变量的值、参数值，或者自行调用</strong>。</p>
<p>匿名函数可以有效的保证在页面上写入Js代码而不会造成全局变量的污染。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">//普通函数</span><br><span class="line">// 1.定义方法</span><br><span class="line">function buy()&#123;</span><br><span class="line">	console.log(&#x27;张三去买东西&#x27;);</span><br><span class="line">&#125;</span><br><span class="line">// 2.调用方法(不调用不执行)</span><br><span class="line">buy()</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">//匿名函数</span><br><span class="line">function ()&#123;</span><br><span class="line">	console.log(&#x27;没有名字&#x27;)</span><br><span class="line">&#125;</span><br><span class="line">//会报错</span><br></pre></td></tr></table></figure>
<p>没有名字的函数会报错，需要用一个括号将函数体包裹起来，在最后面加一个括号就可以立即执行这个函数–直接调用，也叫<strong>自执行函数</strong>。</p>
<p><strong>匿名函数只能调用一次</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">//参数直接写在括号里</span><br><span class="line">//写法1:用括号包裹</span><br><span class="line">(function (sum)&#123;</span><br><span class="line">	console.log(&quot;JavaScript&quot;+sum);</span><br><span class="line">&#125;)(&quot;你好&quot;)</span><br><span class="line">//输出内容为  JavaScript你好</span><br><span class="line"></span><br><span class="line">//写法2：前方加~前缀</span><br><span class="line">~function()&#123;</span><br><span class="line">	console.log(&#x27;立即执行匿名函数！&#x27;)</span><br><span class="line">&#125;()</span><br><span class="line"></span><br><span class="line">//写法3：前方加！前缀</span><br><span class="line">!function()&#123;</span><br><span class="line">	console.log(&#x27;立即执行匿名函数！&#x27;);</span><br><span class="line">&#125;()</span><br></pre></td></tr></table></figure>
<p><strong>匿名函数不允许提前调用，只能在声明之后调用</strong>。</p>
<ul>
<li><p>将匿名函数当做变量的值：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">let show = function(a,b)&#123;</span><br><span class="line">    console.log(a,b);//10,20</span><br><span class="line">&#125;</span><br><span class="line">show(10,20);</span><br><span class="line">function show4()&#123;</span><br><span class="line">    let m = function()&#123;</span><br><span class="line">        console.log(&#x27;key&#x27;);//key</span><br><span class="line">    &#125;</span><br><span class="line">    m();</span><br><span class="line">&#125;</span><br><span class="line">show4();</span><br><span class="line">let stu = &#123;</span><br><span class="line">    id:1,</span><br><span class="line">    name:&#x27;zhang&#x27;,</span><br><span class="line">    shown:function()&#123;</span><br><span class="line">        console.log(this.name);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">stu.shown();//zhang</span><br></pre></td></tr></table></figure>
</li>
<li><p>将匿名函数当做参数值：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">function show5(k)&#123;</span><br><span class="line">    //回调函数</span><br><span class="line">    k();</span><br><span class="line">&#125;</span><br><span class="line">show5(function()&#123;</span><br><span class="line">    //调用了匿名函数</span><br><span class="line">    console.log(&#x27;a&#x27;);//a</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li><p>匿名函数自调用：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">(function()&#123;</span><br><span class="line">    console.log(&#x27;b&#x27;); //b</span><br><span class="line">&#125;)();</span><br><span class="line">(function(a,b)&#123;</span><br><span class="line">    console.log(a + b);//300</span><br><span class="line">&#125;)(100,200);</span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h1 id="2、箭头函数"><a href="#2、箭头函数" class="headerlink" title="2、箭头函数"></a>2、箭头函数</h1><p>箭头函数表面上相当于匿名函数，并且简化了函数定义。</p>
<h3 id="1-、箭头函数的写法：去掉函数名，去掉function，在-与-之间加-x3D-gt-。"><a href="#1-、箭头函数的写法：去掉函数名，去掉function，在-与-之间加-x3D-gt-。" class="headerlink" title="(1)、箭头函数的写法：去掉函数名，去掉function，在()与{}之间加&#x3D;&gt;。"></a>(1)、箭头函数的写法：去掉函数名，去掉function，在()与{}之间加&#x3D;&gt;。</h3><p>()&#x3D;&gt;{}<br>(name)&#x3D;&gt;{}<br>(name,age)&#x3D;&gt;{}<br>箭头函数的使用方法大多与匿名函数相同——可以当做变量的值、当做参数值、可以自调用，关于箭头函数的几种写法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">//箭头函数当做变量值：</span><br><span class="line">let show1 = () =&gt; &#123;</span><br><span class="line">    console.log(&#x27;show1&#x27;);//show1</span><br><span class="line">&#125;;</span><br><span class="line">show1();</span><br><span class="line">let show2 = (name) =&gt; &#123;</span><br><span class="line">    console.log(name);//zhang</span><br><span class="line">&#125;;</span><br><span class="line">show2(&#x27;zhang&#x27;);</span><br><span class="line">let show3 = (name, age) =&gt; &#123;</span><br><span class="line">    console.log(name, age);//wang 20</span><br><span class="line">&#125;;</span><br><span class="line">show3(&#x27;wang&#x27;, 20);</span><br><span class="line">function show4() &#123;</span><br><span class="line">    let test = (name, age) =&gt; &#123;</span><br><span class="line">        console.log(name, age);//wang 20</span><br><span class="line">    &#125;;</span><br><span class="line">    test(&#x27;wang&#x27;, 20);</span><br><span class="line">&#125;</span><br><span class="line">show4();</span><br><span class="line"></span><br><span class="line">//箭头函数当做对象成员的值：</span><br><span class="line">let stu = &#123;</span><br><span class="line">    name: &#x27;zhou&#x27;,</span><br><span class="line">    show: () =&gt; &#123;</span><br><span class="line">        console.log(&#x27;abc&#x27;);//abc</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">stu.show();</span><br><span class="line"></span><br><span class="line">//箭头函数当做参数值：</span><br><span class="line">function test1(a, b, c) &#123;</span><br><span class="line">    let r = a + b;</span><br><span class="line">    c(r);</span><br><span class="line">&#125;</span><br><span class="line">// function test2(z)&#123;</span><br><span class="line">//     console.log(z);//30</span><br><span class="line">// &#125;</span><br><span class="line"></span><br><span class="line">// test1(10,20,function(z)&#123;</span><br><span class="line">//     console.log(z);</span><br><span class="line">// &#125;);</span><br><span class="line">test1(10, 20, (z) =&gt; &#123;</span><br><span class="line">    console.log(z);//30</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">//箭头函数自调用：</span><br><span class="line">(()=&gt; &#123;</span><br><span class="line">    console.log(&#x27;b&#x27;);//b</span><br><span class="line">&#125;)();</span><br><span class="line">((a, b)=&gt; &#123;</span><br><span class="line">    console.log(a + b);//300</span><br><span class="line">&#125;)(100, 200);</span><br></pre></td></tr></table></figure>

<h3 id="2-、箭头函数的变形"><a href="#2-、箭头函数的变形" class="headerlink" title="(2)、箭头函数的变形"></a>(2)、箭头函数的变形</h3><ul>
<li><p>当箭头函数函数体只有一条语句时，包围函数的{}可以去掉。</p>
</li>
<li><p>当箭头函数体中只有一条返回语句时，可省去{},并省去return。</p>
</li>
<li><p>当有仅只有1个形参时，包围形参的()可省。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">//当箭头函数函数体只有一条语句时，可以省略&#123;&#125;</span><br><span class="line">let show1 = ()=&gt;console.log(&#x27;a&#x27;);</span><br><span class="line">show1();//a</span><br><span class="line"></span><br><span class="line">//当箭头函数只有一条返回语句时，可以去掉&#123;&#125;和return</span><br><span class="line">let show2 = ()=&gt;100;</span><br><span class="line">console.log(show2());//100</span><br><span class="line">let show3 = ()=&gt;&#x27;zhnag&#x27;;</span><br><span class="line">console.log(show3());//zhang</span><br><span class="line"></span><br><span class="line">//当带参数的箭头函数只有一条返回语句时，可以去掉&#123;&#125;和return</span><br><span class="line">let show4 = (m,n)=&gt;m + n;</span><br><span class="line">console.log(show4(10,100));//110</span><br><span class="line"></span><br><span class="line">//当箭头函数有且仅有一个形参时，保卫形参的()可以省略</span><br><span class="line">let show5 = key=&gt;key;</span><br><span class="line">console.log(show5(200));//200</span><br></pre></td></tr></table></figure>

<h3 id="3-、箭头函数中的this"><a href="#3-、箭头函数中的this" class="headerlink" title="(3)、箭头函数中的this"></a>(3)、箭头函数中的this</h3><ul>
<li><p>箭头函数的外层函数中的this就是箭头函数中的this,当外层函数中的this发生改变时，箭头函数中的this也会发生改变。</p>
</li>
<li><p>如果没有外部普通函数(箭头函数之外的函数)，则this就是window。</p>
</li>
</ul>
<p>箭头函数和call()比较：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">//1</span><br><span class="line">let obj = &#123;</span><br><span class="line">    x:200</span><br><span class="line">&#125;</span><br><span class="line">let stu = &#123;</span><br><span class="line">    x:100,</span><br><span class="line">    m1:function()&#123;</span><br><span class="line">        let y = ()=&gt;&#123;</span><br><span class="line">            console.log(&#x27;y&#x27;,this.x);</span><br><span class="line">        &#125;</span><br><span class="line">        y();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">//this指stu</span><br><span class="line">stu.m1();</span><br><span class="line">//this指obj</span><br><span class="line">stu.ma.call(obj);</span><br><span class="line">stu.m1();</span><br><span class="line"></span><br><span class="line">//2</span><br><span class="line">var adder = &#123;</span><br><span class="line">    base: 1,</span><br><span class="line">    add: function (a) &#123;</span><br><span class="line">        var f = v =&gt; v + this.base;</span><br><span class="line">        return f(a);</span><br><span class="line">    &#125;,</span><br><span class="line">    addThruCall: function isFun(a) &#123;</span><br><span class="line">        var f = v =&gt; v + this.base;</span><br><span class="line">        var b = &#123;</span><br><span class="line">            base: 2</span><br><span class="line">        &#125;;</span><br><span class="line">        return f.call(b, a);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">//add中 var f = v =&gt; v + this.base的this指的是add的this即adder</span><br><span class="line"></span><br><span class="line">console.log(adder.add(1));      //2</span><br><span class="line"></span><br><span class="line">//未执行f.call(b, a)时，addThruCall中var f = v =&gt; v + this.base的this是addThruCall的this即adder，执行了f.call(b, a)后，由于箭头函数外层函数并未改变，所以，此时的this依然是adder；如果这里是addThruCall.call，那么this可能会改变。</span><br></pre></td></tr></table></figure>

<p>当箭头函数没有外部函数时，this指向window,不能被改变：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var animal = &quot;人&quot;;</span><br><span class="line">let obj = &#123;</span><br><span class="line">    animal: &#x27;狗&#x27;,</span><br><span class="line">&#125;</span><br><span class="line">let getAnimal = () =&gt; this.animal;</span><br><span class="line">//这里this指的是window</span><br><span class="line">console.log(getAnimal());       //人</span><br><span class="line">//当箭头函数没有外部函数时，this指向window,不能被改变</span><br></pre></td></tr></table></figure>

<p>想要在箭头函数内获取所有输入的实参值，可以使用可变参数来接收实参值，接收到的实参会组成一个数组：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let a = (...arg) =&gt; &#123;</span><br><span class="line">    console.log(arg);</span><br><span class="line">    //[1,2,3,4,5]</span><br><span class="line">&#125;</span><br><span class="line">a(1,2,3,4,5)</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="3、区别"><a href="#3、区别" class="headerlink" title="3、区别"></a>3、区别</h1><p>普通函数：this指向直接调用者，非严格模式下没有找到直接调用者就指向window（严格模式下this是undefined）。</p>
<p>箭头函数：</p>
<ul>
<li><p>没有prototype(原型)，所以箭头函数本身没有this。</p>
</li>
<li><p>不能当作构造函数，即不能使用new命令。</p>
</li>
<li><p>不能使用arguments对象，函数体内不存在该对象。可使用rest参数代替。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let a = () =&gt; &#123;</span><br><span class="line">    console.log(arguments);</span><br><span class="line">   //arguments is not defined</span><br><span class="line">&#125;</span><br><span class="line">a()</span><br><span class="line">let b = function()&#123;</span><br><span class="line">    console.log(arguments);</span><br><span class="line">    //类数组&#123;1,2,3,4,5&#125;</span><br><span class="line">&#125;</span><br><span class="line">b(1,2,3,4,5)</span><br></pre></td></tr></table></figure>
</li>
<li><p>没有调用者，捕获其所在（即定义的位置）上下文的this值， 作为自己的this值。this一旦被捕获，就不再发生变化。</p>
</li>
<li><p>箭头函数不能new，普通函数可以new。</p>
</li>
<li><p>箭头函数没有function，使用&#x3D;&gt;来定义；普通函数使用function来定义。</p>
</li>
<li><p>箭头函数和普通函数都可以参与解构，使用时，可以对函数返回值和实参进行解构。</p>
</li>
</ul>
<p>函数返回值解构：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">//箭头函数返回值解构</span><br><span class="line">let calculator = (a,b)=&gt;&#123;</span><br><span class="line">    return &#123;</span><br><span class="line">        add: a + b,</span><br><span class="line">        sub: a - b,</span><br><span class="line">        mul: a / b,</span><br><span class="line">        divided: a * b</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">let &#123;add,sub,mul,divided&#125; = calculator(10,20);</span><br><span class="line">console.log(add,sub,mul,divided);</span><br><span class="line">//自调用箭头函数返回值解构</span><br><span class="line">let &#123;selfadd,selfsub&#125; = ((a,b)=&gt;&#123;return &#123;selfadd: a++,selfsub: b--&#125; &#125; )(1,2);</span><br><span class="line">console.log(selfadd,aelfsub);</span><br><span class="line"></span><br><span class="line">//普通函数返回值解构</span><br><span class="line">function fun(a,b) &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">        add1: a++,</span><br><span class="line">        sub1: b--</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">let &#123;add1,sub1&#125; = fun(10,20);</span><br><span class="line">console.log(add1,sub1);</span><br><span class="line">//自调用普通函数返回值解构</span><br><span class="line">let &#123;add2,sub2&#125; = addSub = function(a,b) &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">        add2: a++,</span><br><span class="line">        sub2: b--</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(add2,sub2);</span><br></pre></td></tr></table></figure>

<p>函数参数解构——实参解构给形参，实参是源，形参是目标：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">//普通函数参数解构</span><br><span class="line">function add(&#123;x,y&#125; = &#123;x:10,y:20&#125;)&#123;</span><br><span class="line">    cosole.log(x,y);//undefined  undefined</span><br><span class="line">&#125;</span><br><span class="line">add(&#123;&#125;);  //&#123;x,y&#125; = &#123;&#125;</span><br><span class="line"></span><br><span class="line">function add2(&#123;x = 10,y = 20&#125;)&#123;</span><br><span class="line">    cosole.log(x,y);</span><br><span class="line">&#125;</span><br><span class="line">add2(&#123;&#125;);  //&#123;x = 10,y = 20&#125; = &#123;&#125;</span><br><span class="line"></span><br><span class="line">//箭头函数参数解构</span><br><span class="line">let add3 = (&#123;x,y&#125; = &#123;x:10,y:20&#125;) =&gt; &#123;cosole.log(x,y);&#125;;</span><br><span class="line">add(&#123;&#125;);</span><br><span class="line">let add4 = ((&#123;x,y&#125; = &#123;x:10,y:20&#125;) =&gt; &#123;cosole.log(x,y);&#125;)(&#123;&#125;);</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="4、箭头函数的使用场景"><a href="#4、箭头函数的使用场景" class="headerlink" title="4、箭头函数的使用场景"></a>4、箭头函数的使用场景</h1><ul>
<li>对象中的方法尽量不要使用箭头函数。</li>
<li>构造函数中的方法可以使用构造函数。</li>
<li>当有外部函数时，要保证内部函数的this指向，可以将内部函数写成箭头函数。</li>
<li>当需要维护上下文的this时，尽量使用箭头函数。</li>
</ul>
<hr>
<p><em><strong>参考文献</strong></em></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://blog.csdn.net/Senora/article/details/122115433#:~:text=js%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E3%80%81%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%EF%BC%8C%E4%BB%A5%E5%8F%8A%E4%BB%96%E4%BB%AC%E7%9A%84%E5%8C%BA%E5%88%AB%201%201.%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%20%E7%AE%80%E5%8D%95%E7%82%B9%E8%AF%B4%E5%B0%B1%E6%98%AF%E6%B2%A1%E6%9C%89%E5%90%8D%E5%AD%97%E7%9A%84%E5%87%BD%E6%95%B0%EF%BC%8C%E5%9C%A8%E5%A3%B0%E6%98%8E%E5%87%BD%E6%95%B0%E6%97%B6%E4%B8%8D%E5%86%99%E5%87%BD%E6%95%B0%E5%90%8D%E7%A7%B0%EF%BC%8C%EF%BC%88%E5%B0%86%E5%87%BD%E6%95%B0%E8%B5%8B%E5%80%BC%E7%BB%99%E5%8F%98%E9%87%8F%EF%BC%89%E5%8F%AB%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E3%80%82%20%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E5%8F%AF%E4%BB%A5%E6%9C%89%E6%95%88%E7%9A%84%E4%BF%9D%E8%AF%81%E5%9C%A8%E9%A1%B5%E9%9D%A2%E4%B8%8A%E5%86%99%E5%85%A5Javascript%EF%BC%8C%E8%80%8C%E4%B8%8D%E4%BC%9A%E9%80%A0%E6%88%90%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E7%9A%84%E6%B1%A1%E6%9F%93%E3%80%82%20%2F%2F%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%20%2F%2F%201.%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95,var%20y%20%3D%20%28%29%3D%3E%7Bconsole.log%28%27%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%27%29%7D%3B%20x%28%29%3B%20y%28%29%3B%201%20" >CSDN ： js匿名函数、箭头函数，区别<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://blog.csdn.net/qq_42602282/article/details/106917287" >CSDN ： JS ES6匿名函数和箭头函数<i class="fas fa-external-link-alt"></i></a></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0/">#匿名函数</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">#箭头函数</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/06/05/Javascript%E4%B9%8B%E5%A0%86%E3%80%81%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">Javascript之浅堆、栈与队列</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
